<!DOCTYPE html>
<html lang="en">

<head>
  <title>Doric Playground</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
    crossorigin="anonymous">

  <!-- Enable responsiveness on mobile devices-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="style-3.css" />
  <link rel="shortcut icon" href="favicon.ico" />
  <style type="text/css">
    body {
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      min-height: 100%;
    }

    body .content {
      -ms-flex: 1;
      flex: 1;
    }

    @media (max-width: 767px) {

      .navbar-logo {
        height: 1.8em !important;
        margin-left: -0.5em !important;
        margin-top: 0.6em !important;
      }

      .fork-me-ribbon {
        display: none;
      }

      .update-banner {
        padding: 3em 3em 1em 3em !important;
        font-size: 1.1em;
      }
    }

    @media (min-width: 768px) {

      .navbar-brand {
        top: 5px;
        left: 15px;
        position: absolute;
      }

      .update-banner {
        padding: 1.6em !important;
        font-size: 1.1em;
        padding-bottom: 1em !important;
        height: 4.4em !important;
      }
    }

    @media (min-width: 992px) {

      .update-banner {
        padding: 1.2em !important;
        height: 4.2em !important;
      }
    }

    @media (min-width: 1200px) {
      .update-banner {
        padding: .9em !important;
        height: 4em !important;
      }
    }

    h1 {
      color: #152740;
      font-size: 3.6em;
    }

    p,
    span,
    ul li,
    ol li {
      font-size: 1.6em;
      line-height: 1.6em;
    }

    ul li ul li,
    ol li ol li {
      font-size: 1em;
    }

    a {
      color: #265988;
    }

    blockquote {
      font-size: 1em;
    }

    img {
      width: 100%;
      height: auto;
    }

    .light-theme {
      color: black;
    }

    /* centered columns styles */
    .row-centered {
      text-align: center;
    }

    .row {
      margin-right: 0px;
      margin-left: 0px;
    }

    .col-centered {
      display: inline-block;
      float: none;
      /* reset the text-align */
      text-align: left;
    }

    /* Buttons */
    .btn {
      box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.25);
    }

    .main-content-skip {
      width: 100%;
      height: 0px;
      text-align: center;
    }

    .main-content-skip:focus {
      color: #fff;
      background-color: #000;
      position: absolute;
      top: 0;
      z-index: 99999;
      font-size: 1.6em;
      line-height: 0;
      padding: 3.2em;
    }

    /* NAVBAR */
    .navbar-default {
      background-color: #294E80;
      border: 0px;
      box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
    }

    .navbar-default p,
    .navbar-default span,
    .navbar-default li {
      font-size: 1.4rem;
    }

    /*@media all and (min-width:1200px)*/
    .centered-navbar>ul {
      display: inline-block;
      float: none;
    }

    /*@media all and (min-width:1200px)*/
    .centered-navbar {
      text-align: center;
      margin-bottom: -3px;
      box-shadow: none;
      border: none;
    }

    .navbar-toggle {
      margin-left: 10px;
    }

    .navbar-default .navbar-toggle .icon-bar {
      background-color: white;
    }

    .navbar-default .navbar-nav>li>a {
      color: white;
      font-size: 1.4rem;
      margin-left: .5em;
    }

    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:hover,
    .navbar-default .navbar-nav>.active>a:focus {
      color: #555;
      background-color: white;
    }

    .navbar-default .navbar-nav>.open>a,
    .navbar-default .navbar-nav>.open>a:hover,
    .navbar-default .navbar-nav>.open>a:focus {
      color: white;
      background-color: #283a62;
    }

    .navbar-default .navbar-nav>li>a:hover,
    .navbar-default .navbar-nav>li>a:focus {
      color: #FFA700;
    }

    .navbar-nav {
      color: white;
    }

    .navbar-brand {
      padding: 0;
      margin: 0;
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      .navbar-brand {
        -ms-high-contrast-adjust: none;
        background-color: #294E80 !important;
      }
    }

    .navbar-logo {
      width: 7.5em;
      height: 1.6em;
      margin-left: 0.5em;
      margin-top: 0.4em;
    }

    #ellipses_btn {
      margin: -15px;
      display: inline-block;
      width: 5em;
      height: 100%;
    }

    .navbar-default .navbar-nav>.open>a,
    .navbar-default .navbar-nav>.open>a:hover,
    .navbar-default .navbar-nav>.open>a:focus {
      background-color: #243A61;
    }

    .high-contrast-only {
      display: none;
    }

    @media screen and (-ms-high-contrast: active) {
      .high-contrast-only {
        display: inherit;
      }
    }

    .navbar-default .navbar-toggle {
      border: none;
    }
  </style>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="qrcode.min.js"></script>
</head>

<body>
  <script src="https://unpkg.com/url-search-params@1.1.0/build/url-search-params.js"></script>
  <script src="https://unpkg.com/clipboard-polyfill@2.4.7/build/clipboard-polyfill.js"></script>
  <script src="https://unpkg.com/monaco-editor@0.15.6/min/vs/loader.js"></script>
  <script>
    const params = new URLSearchParams(location.search);

    window.CONFIG = {
      availableTSVersions: Object.assign(
        {
          "3.7.2": { monaco: "3.7.2", module: "@typescript-deploys/monaco-editor" },
        },
        {},
      ),
      extraLibs: [],
      useJavaScript: params.has("useJavaScript"),
      baseUrl: location.protocol + "//" + location.host + location.pathname,
      siteRoot: location.protocol + "//" + location.host,
      getLatestVersion() {
        return Object.keys(this.availableTSVersions)
          .filter(key => key !== "Nightly" && !key.includes("-"))
          .sort()
          .pop();
      },

      useTSVersion(version) {
        this.TSVersion = version
      },

      getMonacoModule() {
        const version = this.availableTSVersions[this.TSVersion]
        return version ? version.module : "@typescript-deploys/monaco-editor";
      },

      getMonacoVersion() {
        const version = this.availableTSVersions[this.TSVersion];
        return version ? version.monaco : params.get("ts");
      },

      getAdditionalPaths() {
        const version = this.availableTSVersions[this.TSVersion];
        if (!version) return {}

        const lib = this.availableTSVersions[this.TSVersion].lib;

        return lib
          ? {
            "vs/language/typescript": `${this.baseUrl}${lib}`,
          }
          : {};
      },
    };

    window.CONFIG.TSVersion = window.CONFIG.getLatestVersion();
    console.log("window.CONFIG", window.CONFIG);

    if (params.has("ts")) {
      window.CONFIG.useTSVersion(params.get("ts"));
    }

    require.config({
      paths: Object.assign(
        {
          vs: `https://unpkg.com/${window.CONFIG.getMonacoModule()}@${window.CONFIG.getMonacoVersion()}/min/vs`,
        },
        window.CONFIG.getAdditionalPaths(),
      ),
      ignoreDuplicateModules: ["vs/editor/editor.main"],
    });
  </script>

  <div class="flash flash--hidden">
    <span class="flash__message"></span>
  </div>

  <nav class="navbar navbar-sub" style="margin-top: 0px;">
    <div class="container-fluid">
      <ul class="nav navbar-nav">

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
            aria-expanded="false">Examples <span class="caret"></span></a>
          <ul class="dropdown-menu examples" id="examples">
            <li><a href="#">Loading Examples...</a></li>
          </ul>
        </li>

        <li class="hidden-xs"><a href="#" id="run">Run</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right hidden-xs">

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
            aria-expanded="false">Shortcuts <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <div class="info">
              <script>
                const isMac = navigator.userAgent.indexOf("Mac OS X") != -1;
                const CMDCtrl = isMac ? "⌘ command" : "Ctrl";
                const OptionAlt = isMac ? "⌥ option" : "Alt";
                const Enter = isMac ? "return" : "⏎ Enter";
                const Shift = isMac ? "shift" : "⇧ Shift";

                document.write(`<p>Use <kbd>${CMDCtrl}</kbd> + <kbd>${Enter}</kbd> to run compiled JavaScript in the browser console.</p>`);
                document.write(`<p style="margin-top: 2em;">Use <kbd>${CMDCtrl}</kbd> + <kbd>S</kbd> to copy code url to the clipboard.</p>`);
                document.write(`<p style="margin-top: 2em;">Use <kbd>${OptionAlt}</kbd> + <kbd>${Shift}</kbd> + <kbd>F</kbd> to format your code.</p>`);
              </script>
            </div>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
            aria-expanded="false">Theme <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a id="theme-light" href="#" onclick="setEditorTheme('light')">Light</a></li>
            <li><a id="theme-dark" href="#" onclick="setEditorTheme('dark')">Dark</a></li>
            <li><a id="theme-dark-hc" href="#" onclick="setEditorTheme('dark-hc')">Dark (High Contrast)</a></li>
          </ul>
        </li>

        <li class="dropdown" id="qrcode_button">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
            aria-expanded="false">QR Code <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <div class="info" id="qrcode_content">
              <p id="qr_hint">Generating QR Code ...</p>
              <div id="qr_code" style="width: 280px; height: 280px;"></div>
            </div>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
            aria-expanded="false">About <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <div class="info">
              <p>
                Doric Playground.
              </p>
            </div>
          </ul>
        </li>
      </ul>

    </div><!-- /.container-fluid -->
  </nav>

  <div id="loading">
    <div class="lds-circle">
      <div></div>
    </div>
    <p>Loading</p>
  </div>

  <main id="playground">
    <section id="input"></section>
    <section id="right">
      <div id="doric">
      </div>
      <section id="output" class="hidden-xs"></section>
    </section>
  </main>
  </div>
  <script type="text/javascript" src="https://unpkg.com/doric-web/dist/index.js"></script>
  <script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script>
  <script src="main-3.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
  <script>
    require(["vs/editor/editor.main"], main);

    // Lets you click inside the config dropdown and not have it lose focus
    $('#config').on('click', function (e) {
      e.stopPropagation();
    });

    // So that the CSS for a theme is applied before monaco is loaded
    const theme = localStorage.getItem("editor-theme")
    // So dark and dark-hc can share CSS
    if (theme === "dark-hc") {
      document.body.classList.add("dark")
      document.body.classList.add("hc")
    } else {
      document.body.classList.add(theme)
    }

  </script>
</body>

</html>